<template>
  <div class="app-container">
    <el-form label-width="120px" class="el-form-bottom">
      <el-row :gutter="20">
        <el-divider content-position="left"
          ><legend class="divider-line">商品基本信息</legend></el-divider
        >
        <el-col :span="24">
          <el-form-item label="活动名称：">
            <div class="yxkj-word-black">{{ product.productCateName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品名称：">
            <div class="yxkj-word-black">{{ product.name1 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="促销信息：">
            <div class="yxkj-word-black">{{ product.name2 }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品品牌：">
            <div class="yxkj-word-black">{{ product.productBrandName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键字：">
            <div class="yxkj-word-black">{{ product.keyword }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SPU：">
            <div class="yxkj-word-black">{{ product.productCode }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本价：">
            <div class="yxkj-word-black">{{ product.costPrice }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市场价：">
            <div class="yxkj-word-black">{{ product.marketPrice }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保护价：">
            <div class="yxkj-word-black">{{ product.protectedPrice }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上架时间：">
            <div class="yxkj-word-black">{{ product.upTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否商家推荐：">
            <div class="yxkj-word-black" v-for="item in isTop.filter(obj => {return obj.value == product.sellerIsTop})" :key="item.value">{{''+item.name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运费计算类型：">
            <div class="yxkj-word-black" v-for="item in transportType.filter(obj => {return obj.value == product.transportType})" :key="item.value">{{''+item.name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运费模板：">
            <div class="yxkj-word-black">{{ product.sellerTransportName }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"
        ><legend class="divider-line">商品规格</legend></el-divider
      >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="是否启用规格：">
            <div class="yxkj-word-black" v-for="item in isNorm.filter(obj => {return obj.value == product.isNorm})" :key="item.value">{{''+item.name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="货品详情：">
            <el-table :data="productGoods" border style="width: 100%">
              <el-table-column prop="normName" label="规格" width="180">
              </el-table-column>
              <el-table-column prop="sku" label="sku"> </el-table-column>
              <el-table-column prop="productStock" label="库存"> </el-table-column>
              <el-table-column prop="mallPcPrice" label="PC价格"> </el-table-column>
              <el-table-column prop="mallMobilePrice" label="mobile价格"> </el-table-column>
              <el-table-column prop="weight" label="重量(kg)"> </el-table-column>
              <el-table-column prop="length" label="长度(cm)"> </el-table-column>
              <el-table-column prop="width" label="宽度(cm)"> </el-table-column>
              <el-table-column prop="height" label="高度(cm)"> </el-table-column>
              <el-table-column label="是否启用">
                <template slot-scope="scope">
                  <div>{{ codeBox.YES_NO[scope.row.state] }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"
        ><legend class="divider-line">商品属性</legend></el-divider
      >
      <el-row :gutter="20" v-if="productAttrs && productAttrs.length >0">
        <el-col :span="8" v-for="item in productAttrs" :key="item.id">
          <el-form-item :label="item.name+'：'">
            <div class="yxkj-word-black">
              {{ item.value }}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"
        ><legend class="divider-line">商品详情</legend></el-divider
      >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="商品图片：">
            <div class="yxkj-word-black">
              <ul class="picture-list">
                <li v-for="arr in productPictures" :key="arr.id">
                  <!-- <img height="150" :src="$imagePath + arr.imagePath" alt=""> -->
                  <el-image
                    style="width: 150px; height: 150px"
                    :src="$imagePath + arr.imagePath"
                    :preview-src-list="[$imagePath + arr.imagePath]">
                  </el-image>
                </li>
              </ul>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装清单：">
            <div class="yxkj-word-black">
              {{ product.packing }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品详情：">
            <div class="yxkj-word-black" v-html="product.description"></div>
          </el-form-item>
        </el-col>

        <div class="fixed-bottom-20">
            <el-button type="success" @click="back">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { saleDetails } from "@/api/product";
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: "saledetails",
  data() {
    return {
      product: {},
      productGoods: [],
      productAttrs: [],
      productPictures: [],
      isTop: [],
      transportType: [],
      isNorm: []
    };
  },
  created() {
    let id = this.$route.query.productId;
    saleDetails({ productId: id }).then(res => {
      this.product = res.data.data.product;
      this.productGoods = res.data.data.productGoods;
      this.productAttrs = res.data.data.productAttrs
      this.productPictures = res.data.data.productPictures
    });
    // 是否推荐
    getCodeManager("PRODUCT_IS_TOP", () => {
      this.isTop = codeToArray("PRODUCT_IS_TOP")
    });
    // 运费计算类型
    getCodeManager("PRO_TRANSPORT_TYPE", () => {
      this.transportType = codeToArray("PRO_TRANSPORT_TYPE")
    });
    // 是否启用规格
    getCodeManager("PRODUCT_IS_NORM", () => {
      this.isNorm = codeToArray("PRODUCT_IS_NORM")
    });
    // 状态
    getCodeManager("YES_NO", () => {});
  },
  methods: {
    back() {
      history.back();
    },
  }
};
</script>
<style scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.el-form-item {
  margin-bottom: 5px;
}
.picture-list {
  display: flex;
}
.picture-list li {
  list-style: none;
  margin-right: 10px;
}
</style>
